<template>
  <view :class="'background '+extraClass" id="bookkeeping" v-if="show">
    <view class="page-container">
      <view class="header-section">
        <view style="margin-left: 20px;color: pink">
          占位
        </view>
        <view class="header-tabs">
          <span :class="tabValue===0?'active':''" @click="showOutcome">
            支出
          </span>
          <span :class="tabValue===1?'active':''" @click="showIncome">
            收入
          </span>

        </view>
        <view class="header-cancel" @click="leavePage">
          取消
        </view>

      </view>
      <view class="body-section">
        <income-chooser ref="incomeChooser" @choose-account="chooseAccount" />
        <outcome-chooser ref="outcomeChooser" @choose-account="chooseAccount"   />
      </view>


      <account-chooser ref="accountChooser"  />


    </view>
  </view>
</template>

<script>
import SvgIcon from "@/pages/svg-icon.vue";
import IncomeChooser from "@/pages/bookkeeping/income-chooser.vue";
import OutcomeChooser from "@/pages/bookkeeping/outcome-chooser.vue";
import AccountChooser from "@/pages/bookkeeping/account-chooser.vue";

export default {
  components: {AccountChooser, OutcomeChooser, IncomeChooser, SvgIcon},

  data() {
    return {
      tabValue:0,
      topValue: '100',
      extraClass: 'background-animation-none',
      show:false,

    }
  },
  props: {},
  mounted() {
  },
  methods: {
    chooseAccount(){
      this.$refs.accountChooser.open();

    },
    showOutcome(){
      this.tabValue = 0
      this.$refs.outcomeChooser.leavePage()
      this.$refs.incomeChooser.enterPage()
    },
    showIncome(){
      this.tabValue = 1
      this.$refs.incomeChooser.leavePage()
      this.$refs.outcomeChooser.enterPage()

    },
    enterPage() {
      this.extraClass = 'background-animation-enter'
      this.show = true

    },
    leavePage() {
      this.extraClass = 'background-animation-leave'
      setTimeout(()=>{
        this.show = false

      },300)
    },

  },
  onLoad(event) {

  }
}
</script>
<style scoped>
.background {
  //width: 100vw;
  //height: 100vh;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 1000 !important;
}
.background-animation-none{
  top: 100%;
}

.background-animation-enter {

  animation-name: hd-enter;
  animation-duration: 300ms;
}

.background-animation-leave {

  animation-name: hd-leave;
  animation-duration: 300ms;
  top: 100%;
}

@keyframes hd-enter {
  0% {
    top: 100%;
  }
  100% {
    top: 0
  }
}

@keyframes hd-leave {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.page-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.body-section{
  height: calc(100% - 50px);
  position: relative;

}

.header-section{
  background: pink;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.header-section span{
  font-size: 1.1rem;
}

.header-section  .active{
  border-bottom: 1px solid;
}
.header-tabs{

  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.header-tabs span{
  margin-left: 5px;
  margin-right: 5px;
}
.header-cancel{
  color: white;
  margin-right: 20px;
}
</style>